<template>
  <div class="music_box">
    <navigate>心理音乐</navigate>
    <div class="tab_bar">
      <div
        v-for="(item, index) in tabBar"
        :key="index"
        class="item_bar"
        :class="{ active_bar: currentBarId == item.id }"
        @click="chooseBar(item.id, index)"
      >
        <div class="item_txt">{{ item.name }}</div>
        <div class="item_line" v-if="currentBarId == item.id"></div>
      </div>
    </div>

    <!-- 推荐音乐 -->
    <div class="music_cont">
      <div class="recommend_box">
        <div class="total_num">该分类下共有音乐:{{ musicList.length }}首</div>
        <div class="recommend_tit">推荐音乐</div>
        <div class="recommend_list">
          <div
            class="item_recommend"
            v-for="(item, index) in recommendedMusic"
            :key="index"
            @click="toPlayPage(item, 1)"
          >
            <img :src="item.img" alt="" class="recommend_img" />
            <div class="overlay"></div>
            <div class="recommend_info">
              <div class="recommend_name">{{ item.name }}</div>
              <div class="recommend_time">
                {{ formatDuration(item.duration) }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 音乐列表 -->
      <div class="music_list">
        <div class="music_head">
          <div class="line"></div>
          <div class="tit">音乐列表</div>
        </div>
        <div class="music_info">
          <div
            v-for="(item, index) in musicList"
            :key="index"
            class="item_music"
            @click="toPlayPage(item, 2)"
          >
            <img :src="item.img" alt="" class="music_img" />
            <div class="music_desc">
              <div class="music_tit">{{ item.name }}</div>
              <div class="music_label">
                <div class="label_txt">
                  标签：{{ item.label ? item.label.join("、 ") : "" }}
                </div>
                <div class="music_time">
                  {{ formatDuration(item.duration) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDuration } from "@/utils/time";
import {
  queryMuiscType,
  queryMusicInfo,
  queryHotMusiceList,
} from "@/api/funcation/psychologicalMusic";
export default {
  data() {
    return {
      currentBarId: 0,
      tabBar: [],
      page: 1,
      pageSize: 10,
      musicList: [],
      recommendedMusic: [],
      musicTotal: 0,
    };
  },
  created() {
    this.getMuiscType();
    this.getHotMusicList();
  },

  methods: {
    formatDuration,
    //推荐音乐
    async getHotMusicList() {
      let par = {
        type_id: this.currentBarId,
      };
      let res = await queryHotMusiceList(par);
      if (res.code == 200) {
        this.recommendedMusic = res.data;
      }
    },
    //类型
    async getMuiscType() {
      let res = await queryMuiscType();
      if (res.code == 200) {
        this.tabBar = res.data;
        this.currentBarId = this.tabBar[0].id;
        this.getMusicInfo();
      }
    },
    //音乐列表
    async getMusicInfo() {
      let par = {
        page: this.page,
        pageSize: this.pageSize,
        type_id: this.currentBarId,
      };
      let res = await queryMusicInfo(par);
      if (res.code == 200) {
        this.musicList = res.data.data;
        this.musicTotal = res.data.total;
      }
    },
    chooseBar(id, index) {
      // this.currentBar = item.id;
      this.currentBarId = id;
      this.getMusicInfo(id);
      this.getHotMusicList(id);
    },
    toPlayPage(item, type) {
      this.$router.push({
        path: `/playMusic?musiceId=${item.id}&typeId=${this.currentBarId}&type=${type}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.music_box {
  background-color: #f4f6fa;
  color: #333333;
}

.music_cont {
  padding: 0 10px;
}

//音乐列表
.music_list {
  margin-top: 18px;
}

.music_head {
  display: flex;
  align-items: center;
}

.music_head .line {
  width: 5.33px;
  height: 15.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #2aa1ec;
  border-radius: 2.67px;
}

.music_head .tit {
  font-size: 15.33px;
  font-weight: bold;
  margin-left: 10px;
}

.music_info {
  margin-top: 15.67px;
}

.item_music {
  display: flex;
  align-items: center;
  border-radius: 6.67px;
  padding: 10px 16.7px 10px 10px;
  background-color: #fff;
  margin-bottom: 6.67px;
}

.item_music .music_img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  margin-right: 9.67px;
}

.music_desc {
  flex: 1;
  min-width: 0;
}

.item_music .music_tit {
  font-size: 15.33px;
  line-height: 15.33px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.music_label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 14px;
  color: #aaaaaa;
}

.label_txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.music_time {
  margin-left: 20px;
  line-height: 14px;
}

//推荐音乐
.recommend_box {
  padding: 16.7px 10px;
  background-color: #fff;
  border-radius: 6.67px;
}

.total_num {
  opacity: 0.5;
  font-size: 12px;
}

.recommend_tit {
  font-size: 18.67px;
  margin: 16.3px 0 16.67px;
}

.recommend_list {
  width: 100%;
  display: flex;
  gap: 16px;
  overflow-x: scroll;
}

.recommend_list::-webkit-scrollbar {
  display: none;
}

.item_recommend {
  position: relative;
  flex-shrink: 0;
  width: 173.33px;
  height: 173.33px;
  border-radius: 6.67px;
  color: #ffffff;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.recommend_img {
  display: block;
  width: 100%;
  height: auto;
}

.recommend_info {
  position: absolute;
  z-index: 1;
  width: 100%;
  color: white;
  bottom: 9.67px;
  padding: 0 10px;
}

.recommend_name {
  font-size: 15.33px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend_time {
  font-size: 12px;
  margin-top: 9.67px;
}

.tab_bar {
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: scroll;
  color: #333333;
  font-size: 14px;
  padding: 0 20px;
  width: 100%;
  height: 54.33px;
  white-space: nowrap;

  &::-webkit-scrollbar {
    display: none;
  }
}

.item_bar {
  margin-right: 39px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}

.active_bar {
  font-weight: bold;
  color: #00aeff;
}

.item_line {
  position: absolute;
  bottom: -8.33px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 13.33px;
  height: 5.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #00aeff;
  border-radius: 2.67px;
  opacity: 0;
  transition: opacity 0.3s;
}

.active_bar .item_line {
  opacity: 1;
}

.item_bar:last-child {
  margin-right: 0;
}
</style>
